/*-------------------   外部导入   -------------------------------------------------------------------*/
import {
  useSearchParams,
  NavLink,
  useNavigate,
  useLocation
} from "react-router-dom";
import React from "react";
import { Card, Button, Row, Col } from "antd";
import { useState, useEffect } from "react";
// 导入接口
import {
  getInformation, // 用户信息
  getShops, // 店铺信息
  getParkingLot // 车位信息
} from "../../../api/admin";
// 字体图标
import { PlusOutlined } from "@ant-design/icons";
/*-------------------   外部导入   -------------------------------------------------------------------*/
const ownerDetail = () => {
  /*-------------------   定义数据   -------------------------------------------------------------------*/
  // 获取路由信息
  const location = useLocation().search;
  const [information, setInformation] = useState({});
  const [shops, setShops] = useState([]);
  const [parkingLot, setParkingLot] = useState([]);
  const navigate = useNavigate();
  /*-------------------   定义数据   -------------------------------------------------------------------*/

  //  获取数据
  useEffect(() => {
    const ind: any = location.indexOf("&");
    const id = location.slice(9, ind);
    const obj = {
      ownerId: id,
      page: 1,
      row: 1,
      communityId: 2023032658120002,
      ownerTypeCd: 1001
    };
    getInformation(obj).then(res => {
      console.log("用户信息", res.data.owners[0]);
      setInformation(res.data.owners[0]);
      console.log(information);
    });
    getShops(obj).then(res => {
      console.log("店铺信息", res);
      setShops(res.data.rooms);
    });

    getParkingLot(obj).then(res => {
      console.log("车位信息", res.data.parkingSpaces);
      setParkingLot(res.data.parkingSpaces);
    });
  }, []);

  /*vvvvvvvvvvvvvvvvvvv   以下是DOM渲染内容  vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/
  return (
    <div className="ownerDetail">
      <div>
        <Card
          type="inner"
          title="业主信息"
          extra={
            <Button
              type="primary"
              onClick={() => {
                navigate("/pages/property/listOwner");
              }}
            >
              返回
            </Button>
          }
        >
          <ul>
            <li>
              <img src={information.url} alt="" />
            </li>
            <li>
              <p>
                业主ID：{information.ownerId}
              </p>
              <p>
                年龄：{information.age}
              </p>
              <p>
                创建员工：{information.userName}
              </p>
              <p>
                门禁钥匙：
                {/* {(information.ownerAttrDtos[1] || {}).value} */}
              </p>
            </li>
            <li>
              <p>
                姓名：{information.name}
              </p>
              <p>
                身份证：{information.idCard}
              </p>
              <p>
                备注：{information.remark}
              </p>
              <p>
                QQ：
                {/* {(information.ownerAttrDtos[0] || {}).value} */}
              </p>
            </li>
            <li>
              <p>
                性别：{information.sex ? "男" : "女"}
              </p>
              <p>
                联系方式：{information.link}
              </p>
            </li>
          </ul>
        </Card>
        {shops.map((item: any, index: any) =>
          <Card
            key={index}
            style={{ marginTop: 16 }}
            type="inner"
            title={item.roomNum + "商铺信息"}
            extra={
              <Button type="primary" icon={<PlusOutlined />}>
                物业费
              </Button>
            }
            className="list2"
          >
            <Row gutter={24}>
              <Col span={8}>
                商铺编号：{item.floorNum} - {item.roomNum}
              </Col>
              <Col span={8}>
                楼层：{item.layer}层
              </Col>
              <Col span={8}>
                商铺ID：{item.roomId}
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={8}>
                建筑面积：{item.builtUpArea}平方米
              </Col>
            </Row>
          </Card>
        )}

        {parkingLot.map((item: any, index: any) =>
          <Card
            key={index}
            style={{ marginTop: 16 }}
            type="inner"
            title={item.roomNum + "车辆信息："}
            className="list2"
          >
            <Row gutter={24}>
              <Col span={8}>
                车辆ID：{item.psId}
              </Col>
              <Col span={8}>
                车辆编号：{item.num}
              </Col>
              <Col span={8}>
                车辆类型：{item.parkingTypeName}
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={8}>
                车位状态：{item.stateName}
              </Col>
              <Col span={8}>
                车位面积：{item.area}平方米
              </Col>
              <Col span={8}>
                车辆ID：{item.caeId}
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={8}>
                车牌号：{item.carNum}
              </Col>
              <Col span={8}>
                车品牌：{item.carBrand}
              </Col>
              <Col span={8}>
                车类型：{item.carType}
              </Col>
            </Row>
          </Card>
        )}
      </div>
    </div>
  );
};

export default ownerDetail;
